<template>

  <div class="clearfix">

    <el-tree
      ref="mtTree"
      v-loading="treeLoading"
      :data="directories"
      node-key="id"
      :default-expanded-keys="directories.length?[directories[0].id]:[]"
      :filter-node-method="filterCategoryNode"
      :expand-on-click-node="false"
      :props="{ children: 'children', label: 'name' }"
      check-strictly
      @node-click="handleClickNode"
    >
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span>{{ data.image__count + ' | ' + node.label }}</span>
        <span v-if="data.id !== -1& editable">
          <el-button
            type="text"
            size="mini"
            style="margin-right: 5px;color:orange;"
            @click.stop="showEditDirectoryDialog(data)"
          >修改
          </el-button>

          <el-button
            type="text"
            size="mini"
            style="margin-right: 5px;"
            @click.stop="showAddDirectoryDialog(data)"
          >添加
          </el-button>

          <el-button
            type="text"
            size="mini"
            style="margin-right: 5px;color:#F56C6C;"
            @click.stop="showDeleteDirectoryDialog(data)"
          >删除
          </el-button>
        </span>
      </span>
    </el-tree>
    <el-button
      v-if="editable"
      size="mini"
      style="float: right;margin: 10px 10px 0 0"
      @click.stop="showAddDirectoryDialog()"
    >添加顶级分类
    </el-button>
    <el-button
      plain
      icon="el-icon-refresh"
      title="刷新"
      size="mini"
      style="float: left;margin: 10px 10px 0 0;"
      @click="handleFetchTree"
    />
    <el-dialog
      append-to-body
      :title="title"
      :width="width"
      :visible.sync="innerDialogVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="temp" label-position="left" label-width="80px">

        <el-form-item v-if="action !== 'delete'" label="名称">
          <el-input v-model="temp.name" />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="innerDialogVisible = false">取 消</el-button>
        <el-button :type="action !== 'delete'?'primary':'danger'" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  Post as AddDirectory,
  Put as EditDirectory,
  Delete as DeleteDirectory,
  GetTree
} from '@/api/cms/directory'
export default {
  name: 'Directory',
  props: {
    editable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      filterText: null,
      treeLoading: false,
      directories: [],
      projects: [],
      projectsLoading: false,
      innerDialogVisible: false,
      action: '',
      width: '',
      title: '图片目录管理',
      temp: {
        name: '',
        parent_id: ''
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.mtTree.filter(val)
    }
  },
  created() {
    this.handleFetchTree()
  },
  methods: {
    filterCategoryNode(value, data) {
      if (!value) return true
      return data.name.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) !== -1
    },
    showEditDirectoryDialog(data) {
      this.temp.name = data.name
      this.temp.id = data.id
      this.temp.project_id = data.project_id
      this.innerDialogVisible = true
      this.action = 'edit'
    },
    showAddDirectoryDialog(data) {
      this.temp.name = ''
      this.temp.parent_id = data && data.id
      this.innerDialogVisible = true
      this.action = 'create'
      // this.$prompt('请输入目录名称', '添加目录', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消'
      // }).then(({ value }) => {
      //   this.treeLoading = true
      //   AddDirectory({ name: value, parent_id: data && data.id })
      //     .then(response => {
      //       this.handleFetchTree()
      //     })
      //     .catch(() => {
      //       this.treeLoading = false
      //     })
      // }).catch(() => {
      // });
    },
    handleAddDrectory() {
      this.treeLoading = true
      AddDirectory({ name: this.temp.name, parent_id: this.temp.parent_id, project_id: this.temp.project_id })
        .then(response => {
          this.innerDialogVisible = false
          this.handleFetchTree()
          this.treeLoading = false
        })
        .catch(() => {
          this.treeLoading = false
        })
    },
    confirm() {
      const _data = this.temp
      switch (this.action) {
        case 'create':
          if (_data.project_id === '') {
            alert('必须选择项目')
            return
          }
          if (!_data.name.length) {
            alert('必须填写目录名称')
            return
          }
          this.handleAddDrectory()
          break
        case
          'delete'
          :
          this.showDeleteDirectoryDialog(_data)
          break
        case
          'edit'
          :
          EditDirectory(_data.id, { name: _data.name, project_id: _data.project_id })
            .then(response => {
              this.handleFetchTree()
              this.innerDialogVisible = false
            })
            .catch(() => {
              this.treeLoading = false
            })
          break
      }
    },
    showDeleteDirectoryDialog(data) {
      this.$confirm(`确认要删除目录  ${data.name}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.treeLoading = true
        DeleteDirectory(data.id)
          .then(response => {
            this.handleFetchTree()
          })
          .catch(() => {
            this.treeLoading = false
          })
      }).catch(() => {
      })
    },
    handleFetchTree() {
      this.treeLoading = true
      GetTree()
        .then(response => {
          this.directories = response.data
          this.treeLoading = false
        })
        .catch(e => {
          this.treeLoading = false
        })
    },
    handleClickNode(data) {
      this.$emit('handleClickNode', data)
    }
  }
}
</script>

<style scoped>

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  .clearfix ::after {
    content: "";
    display: block;
    clear: both
  }
</style>
